import React from 'react';

import render from 'src/hrpub/common/frame/render';
import './index.less'
import {connect} from 'src/hrpub/common/store';
import HomeAction from "./actions/home";
import HomeHeader from "./components/Header";
import HomeBanner from "./components/Banner";
import AgeEdu from "./components/age-edu";
import RankStructure from "./components/rank-structure";
import StaffChange from "./components/staff-change";
import EntryDimission from "./components/entry-dimission";
import {COMMON} from "../../unit/util";
import {THEME} from "../../../../public/theme/theme";


const HomePage = render({
    actions: {
        homeAct: HomeAction
    },
    state: {
        staticData: [
            {key: COMMON.pageTotal, num: 0, label: "gx6008-000129"}, //总人数,
            {key: COMMON.pageEntry, num: 0, label: "gx6008-000130"}, //入职人数
            {key: COMMON.pageDimission, num: 0, label: "gx6008-000131"}, //离职人数
            {key: COMMON.pageChange, num: 0, label: "gx6008-000132"}, //变动人数
            {key: COMMON.pageReg, num: 0, label: "gx6008-000133"}, //待转正人数
        ]
    }
})(({props, action, state}) => {

    let chartParam = {
        dispatch: props.dispatch,
        staffCom: props.staffCom,
        pk_org: props.staffCom.pk_org,
        pk_psncl: props.staffCom.pk_psncl,
        titleClass: THEME.borderC,
        showDetail: action.homeAct.showDetail
    };
    let hasLanguage = Object.keys(props.staffCom.language).length > 0;
    return (
        <div className={'home-page'}>
            <HomeHeader
                {...props}
                hrorgChange={action.homeAct.hrorgChange}
                psnclChange={action.homeAct.psnclChange}
            />
            <HomeBanner
                {...props}
                staticData={state.staticData}
                lineClass={THEME.borderC}
                showDetail={action.homeAct.showDetail}
            />
            {hasLanguage && <div className="chart-panel">
                <div className={`chart-item ${THEME.borderC}`}>
                    <AgeEdu
                        {...chartParam}
                    />
                </div>
                <div className={`chart-item ${THEME.borderC}`}>
                    <EntryDimission
                        {...chartParam}
                    />
                </div>
                <div className={`chart-item ${THEME.borderC}`}>
                    <RankStructure
                        {...chartParam}
                    />
                </div>
                <div className={`chart-item ${THEME.borderC}`}>
                    <StaffChange
                        {...chartParam}
                    />
                </div>
            </div>}
        </div>
    );

});

export default connect(HomePage);
